<template>
  <div class="channel-content">
    <div v-show="queryParam.page.total==0">
      <Button type="success"  Title="新增..." icon="ios-add" shape="circle" @click="add" style="margin-left: 10px"></Button>
      <Button type="primary"  Title="刷新..." icon="ios-refresh" shape="circle" @click="refresh" style="margin-left: 10px"></Button>
      <span style="margin-left: 10px">暂无数据......</span>
    </div>
    <div v-show="queryParam.page.total!=0">
      <SearchHeader v-model="queryParam.where.keyword"
                    :canRefresh="canRefresh"
                    @handleSearch="getData"
                    @handleAdd="add"
                    @handleInit="queryParam.init"
                    @handleRefresh="refresh">
        <Row :gutter="4">
          <Col span="4"><Input placeholder="通道编号" v-model="queryParam.where.code"></Input> </Col>
          <Col span="4"><Input placeholder="通道名称" v-model="queryParam.where.name"></Input> </Col>
          <Col span="4">
            <Select placeholder="状态" v-model="queryParam.where.status">
              <Option value=null>全部</Option>
              <Option value=1>在线</Option>
              <Option value=2>离线</Option>
            </Select>
          </Col>
        </Row>
      </SearchHeader>
      <Table border :row-class-name="rowClassName" :columns="columns" :data="tableData" :loading="tableLoading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" Title="浏览" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default" Title="播放" icon="md-play"  v-if="row.status==1" style="margin-right: 3px" @click="play(row)"></Button>
          <Button type="default" title="编辑" icon="md-create" style="margin-right: 3px" @click="edit(row)"></Button>
          <Button type="default" title="删除" icon="md-trash" style="margin-right: 3px" @click="remove(row)"></Button>
          <Button type="default" title="设备录象" icon="md-videocam" style="margin-right: 3px" @click="record(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          <span v-if="row.status==1" style="color: green" >在线</span>
          <span v-if="row.status==0" style="color: red">离线</span>
        </template>
        <template slot-scope="{ row, index }" slot="ptzType">
          <span v-if="row.ptzType==null || row.ptzType==0" >未知</span>
          <span v-if="row.ptzType==1" >球机</span>
          <span v-if="row.ptzType==2" >半球</span>
          <span v-if="row.ptzType==3" >固定枪机</span>
          <span v-if="row.ptzType==4" >遥控枪机</span>
        </template>
        <template slot-scope="{ row, index }" slot="hasAudio">
          <span v-if="row.hasAudio==true" style="color: green" >开启</span>
          <span v-if="row.hasAudio==false" style="color: red">关闭</span>
        </template>
        <template slot-scope="{ row, index }" slot="snapshoot">
          <img src="/images/man_user.png" alt="快照"></img>
        </template>
      </Table>
      <TopnavPage v-show="showPage" v-model="queryParam.page" @changePage="getData"></TopnavPage>
    </div>

    <DxChannelEdit ref="dxChannelEdit"></DxChannelEdit>

  </div>
</template>
<script>
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import DxChannelEdit from "@/view/Device/DXChannelEdit.vue";
import Channel from "@/api/channel";
import {apiResult, clone} from '@/libs/util';

export default {
  name: "dxChannel",
  components: {TopnavPage,SearchHeader,DxChannelEdit},
  props:{
    value:{
      type:Object,
      default: () => { return null;} //对象参数必须这样写
    }
  },
  watch:{
    value:{
      immediate:true,
      handler(val){
        if (!!val){
          this.device=val;
/*          this.queryParam.where.deviceId=val.id
          this.deviceCode=val.code;
          this.deviceId=val.id;*/
/*          console.log("deviceCode: %o",this.deviceCode);
          console.log("deviceId: %o",this.deviceId);*/
          this.getData();
        }

/*        console.log("device.value: %o",val);*/
      }
    }
  },
  data(){
    return{
      api: new Channel(),
      device:null,
      tableLoading:false,
      canRefresh:true,
      showPage:false,
      tableData:[],
      queryParam:{
        page: {
          pages: 1,
          size: 20,
          total: 0,
          current: 1,
        },
        where: {keyword:null,code: null, name: null, deviceId: null, status:null},
        init:()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          //this.queryParam.where.deviceId=null;
          this.queryParam.where.status=null;
        }
      },
      columns:[
        {title: '操作', key: 'action', width: 180,slot: 'action',align: 'center',className:"custom-column"},
        //{title: '设备编号', key: 'deviceCode', sortable: true, width: 200},
        {title: '通道编号', key: 'channelCode', sortable: true, width: 200},
        {title: '名称', key: 'name', sortable: true, width: 200},
        {title: '状态', key: 'status', sortable: true, width: 100,slot:'status'},
        {title: '快照', key: 'channelId', sortable: true, width: 200,slot: 'snapshoot'},
        {title: '开启音频', key: 'hasAudio', sortable: true, width: 200,slot:'hasAudio'},
        {title: '云台类型', key: 'ptzType', sortable: true, width: 200,slot:'ptzType'},
      ],
    }
  },
  methods:{
    getData(){

      this.queryParam.where.deviceId = this.device.id;
      console.log(this.queryParam.where);
      /** 摸拟第一行点击 */
      this.api.queryChannelPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
          apiResult(res.data,false,result=>{
            this.showPage = this.queryParam.page.pages > 1;
            this.queryParam.page.total = result.data.total;
            this.tableData = result.data.records;
          });
      })
    },
    add() {
      let row={
        id: null,
        deviceId: this.device.id,
        deviceCode: this.device.code,
        code: null,
        ptzType: 0,
        longitude: null,
        latitude: null,
        hasAudio: false,
        //hasAudioBool: false,
        manufacture: null,
        parentId:this.device.gbServerDomain,
        status:0,
      }
      this.$refs.dxChannelEdit.openDialog("ADD",clone(row), this.getData);
    },
    edit(row) {
      console.log(row);
      this.$refs.dxChannelEdit.openDialog("EDIT",clone(row), this.getData);
    },
    view(row) {
      this.$refs.dxChannelEdit.openDialog("VIEW",clone(row), this.getData);
    },
    remove(row){
      this.$Modal.confirm({
        title: '删除确认',
        content: '<p>确定要删除此项？</p',
        onOk: () => {
          this.api.removeChannel(JSON.stringify(row)).then(res=>{
              apiResult(res.data,true,result=>{this.getData();});

          })
        },
        onCancel: () => {}
      });
    },
    refresh(){
      console.log("refresh 刷新通道状态！");
    },
    rowClassName (row, index) {
/*      if (index === 1) {
        return 'custom-table-info-row';
      } else if (index === 3) {
        return 'custom-table-error-row';
      }
      return '';*/
      return 'custom-table-info-row';
    },
    columnClassName(){
      return 'custom-column';
    }
  },
  mounted() {

  }

}
</script>
<style lang="less">
  //@import "../../my-theme/template";
/*
  .ivu-table .custom-table-info-row td{
    background-color: rgba(240, 241, 246, 0.99);
    color: rgba(17, 17, 17, 0.99);
  }
  .ivu-table .custom-table-error-row td{
    background-color: #ff6600;
    color: #fff;
  }

  .custom-column th {
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    background-color: #9595bd;
  }


  .channel-content {
    background-color: rgba(240, 241, 246, 0.99);
  }*/
</style>
